<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="etrip-collapse" role="tablist" aria-multiselectable="true">
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content1" id="header1">
      <span>1. What is an eSIM?</span>
      <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="9,18 15,12 9,6"></polyline>
      </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header1" aria-hidden="true" id="content1">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="1324" data-start="984">An <strong data-end="1010" data-start="987">eSIM (embedded SIM)</strong> is a digital SIM built directly into your device. It lets you activate a mobile data plan <strong data-end="1142" data-start="1101">without inserting a physical SIM card</strong>. You can download, activate, and manage multiple eSIM profiles right from your phone’s settings — perfect for travelers who want quick setup and reliable data anywhere in the world.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- FAQ Item 2 -->
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content2" id="header2">
      <span>2. How do I check if my phone supports eSIM?</span>
      <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="9,18 15,12 9,6"></polyline>
      </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header2" aria-hidden="true" id="content2">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="1421" data-start="1382">To check if your phone supports eSIM:</p>
          <ul data-end="1711" data-start="1422">
            <li data-end="1456" data-start="1422">
              <p data-end="1456" data-start="1424">Dial <strong data-end="1439" data-start="1429">*#06#</strong> on your phone.</p>
            </li>
            <li data-end="1711" data-start="1457">
              <p data-end="1711" data-start="1459">If you see an <strong data-end="1487" data-start="1473">EID number</strong> displayed, your device supports eSIM.<br data-end="1528" data-start="1525">You can also check your phone model on the manufacturer’s website for eSIM compatibility.<br data-end="1620" data-start="1617"><em data-end="1711" data-start="1620">(Most iPhones after iPhone XS, and most Android phones released after 2020 support eSIM.)</em></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- FAQ Item 3 -->
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content3" id="header3">
      <span>3. How long is my eSIM QR code valid?</span>
      <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="9,18 15,12 9,6"></polyline>
      </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header3" aria-hidden="true" id="content3">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="2003" data-start="1762">Your eSIM QR code is valid for <strong data-end="1804" data-start="1793">60 days</strong> from the date of purchase.<br data-end="1834" data-start="1831">Once installed, your <strong data-end="1885" data-start="1855">plan activates immediately</strong>, so we recommend scanning the QR code <strong data-end="1966" data-start="1924">just before you travel or upon arrival</strong>, using a stable internet connection.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content1" id="header4">
      <span>4. What are the features of the Global Travel eSIM plan?</span> <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="9,18 15,12 9,6"></polyline>
    </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header1" aria-hidden="true" id="content4">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <ul data-end="2538" data-start="2073">
            <li data-end="2179" data-start="2073">
              <p data-end="2179" data-start="2075"><strong data-end="2094" data-start="2075">Data-only plan:</strong> Provides high-speed internet for browsing, maps, social media, and messaging apps.</p>
            </li>
            <li data-end="2253" data-start="2180">
              <p data-end="2253" data-start="2182"><strong data-end="2202" data-start="2182">No calls or SMS:</strong> Voice calls and text messaging are not included.</p>
            </li>
            <li data-end="2322" data-start="2254">
              <p data-end="2322" data-start="2256"><strong data-end="2277" data-start="2256">Daily data reset:</strong> Usage resets at <strong data-end="2303" data-start="2294">UTC+8</strong> time zone daily.</p>
            </li>
            <li data-end="2450" data-start="2323">
              <p data-end="2450" data-start="2325"><strong data-end="2346" data-start="2325">Speed throttling:</strong> After your high-speed data limit is reached, speed reduces to <strong data-end="2421" data-start="2409">128 Kbps</strong>, but you remain connected.</p>
            </li>
            <li data-end="2538" data-start="2451">
              <p data-end="2538" data-start="2453"><strong data-end="2476" data-start="2453">Instant activation:</strong> Plan starts <strong data-end="2522" data-start="2489">immediately upon installation</strong> of your eSIM.</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content1" id="header5">
      <span>5. Easy Installation Guide</span> <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="9,18 15,12 9,6"></polyline>
    </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header1" aria-hidden="true" id="content5">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="2751" data-start="2578"><strong data-end="2591" data-start="2578">Delivery:</strong> Your eSIM QR code will be sent via <strong data-end="2636" data-start="2627">email</strong> — no physical SIM card will be shipped.<br data-end="2679" data-start="2676"><strong data-end="2701" data-start="2679">Internet required:</strong> Please ensure a stable connection during setup.</p>
          <p data-end="2802" data-start="2753"><strong data-end="2776" data-start="2753">Installation steps:</strong><br data-end="2779" data-start="2776"><strong data-end="2800" data-start="2779">For iPhone (iOS):</strong></p>
          <ol data-end="2984" data-start="2803">
            <li data-end="2849" data-start="2803">
              <p data-end="2849" data-start="2806">Go to <strong data-end="2846" data-start="2812">Settings → Cellular → Add eSIM</strong>.</p>
            </li>
            <li data-end="2905" data-start="2850">
              <p data-end="2905" data-start="2853">Select <strong data-end="2875" data-start="2860">Use QR Code</strong> and scan your eSIM QR code.</p>
            </li>
            <li data-end="2984" data-start="2906">
              <p data-end="2984" data-start="2909">Turn on <strong data-end="2933" data-start="2917">Data Roaming</strong> and set this eSIM as your <strong data-end="2981" data-start="2960">primary data line</strong>.</p>
            </li>
          </ol>
          <p data-end="3028" data-start="2986"><strong data-end="3026" data-start="2986">For Android (Samsung, Google, etc.):</strong></p>
          <ol data-end="3211" data-start="3029">
            <li data-end="3106" data-start="3029">
              <p data-end="3106" data-start="3032">Go to <strong data-end="3103" data-start="3038">Settings → Connections → SIM Manager → Add Mobile Plan / eSIM</strong>.</p>
            </li>
            <li data-end="3135" data-start="3107">
              <p data-end="3135" data-start="3110">Scan your eSIM QR code.</p>
            </li>
            <li data-end="3211" data-start="3136">
              <p data-end="3211" data-start="3139">Turn on <strong data-end="3163" data-start="3147">Data Roaming</strong> and select this eSIM as your <strong data-end="3208" data-start="3193">data source</strong>.</p>
            </li>
          </ol>
          <p data-end="3275" data-start="3213">💡 <em data-end="3275" data-start="3216">Tip: Most users complete installation in under 3 minutes.</em></p>
        </div>
      </div>
    </div>
  </div>
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content1" id="header6">
      <span>6. Can I use the eSIM on multiple devices?</span> <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="9,18 15,12 9,6"></polyline>
    </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header1" aria-hidden="true" id="content6">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="3589" data-start="3331">Each eSIM QR code can be <strong data-end="3408" data-start="3356">installed only on the same device multiple times</strong> (for example, if you reset your phone).<br data-end="3451" data-start="3448">However, <strong data-end="3505" data-start="3460">it cannot be transferred to another phone</strong> once activated. Please make sure to install it on the device you’ll use for travel.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content1" id="header7">
      <span>7. Does the eSIM support hotspot/tethering?</span> <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="9,18 15,12 9,6"></polyline>
    </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header1" aria-hidden="true" id="content7">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="3847" data-start="3646">Yes, most of our Global Travel eSIM plans <strong data-end="3716" data-start="3688">support personal hotspot</strong> (data sharing).<br data-end="3735" data-start="3732">Please note that <strong data-end="3785" data-start="3752">hotspot availability may vary</strong> depending on the destination country or local network policy.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content1" id="header8">
      <span>8. What should I do if the eSIM doesn’t connect?</span> <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="9,18 15,12 9,6"></polyline>
    </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header1" aria-hidden="true" id="content8">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="3955" data-start="3909">If your eSIM does not connect automatically:</p>
          <ol data-end="4243" data-start="3956">
            <li data-end="3995" data-start="3956">
              <p data-end="3995" data-start="3959">Turn <strong data-end="3981" data-start="3964">Airplane Mode</strong> on and off.</p>
            </li>
            <li data-end="4039" data-start="3996">
              <p data-end="4039" data-start="3999">Make sure <strong data-end="4025" data-start="4009">Data Roaming</strong> is enabled.</p>
            </li>
            <li data-end="4065" data-start="4040">
              <p data-end="4065" data-start="4043">Restart your device.</p>
            </li>
            <li data-end="4243" data-start="4066">
              <p data-end="4243" data-start="4069">If still not connected, <strong data-end="4128" data-start="4093">manually select a local network</strong> under Mobile Network settings.<br data-end="4162" data-start="4159">If the issue continues, please <strong data-end="4221" data-start="4193">contact our support team</strong> for quick assistance.</p>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
  <div class="etrip-collapse-item">
    <div class="etrip-collapse-header" role="tab" aria-expanded="false" aria-controls="content1" id="header9">
      <span>9. Can I top up or extend my eSIM plan?</span> <svg class="etrip-collapse-arrow" viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="9,18 15,12 9,6"></polyline>
    </svg>
    </div>
    <div class="etrip-collapse-wrap" style="height: 0;" role="tabpanel" aria-labelledby="header1" aria-hidden="true" id="content9">
      <div class="etrip-collapse-content">
        <div class="demo-content">
          <p data-end="4504" data-start="4296">Currently, most eSIM plans are <strong data-end="4348" data-start="4327">one-time packages</strong>.<br data-end="4352" data-start="4349">If you need more data or extra days, simply <strong data-end="4421" data-start="4396">purchase another plan</strong> and scan the new QR code — you can store and manage multiple eSIMs on your device.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="max-width: 700px; margin: 0 auto;">
  <div style="padding: 10px;">
    <h2 data-end="907" data-start="644">Contact</h2>
    <p data-end="907" data-start="644">If you need a refund, wish to add a new destination, or have any other requests, please <a href="/pages/contact">contact us here</a>.</p>
  </div>
</div>
<style>
  .etrip-collapse {
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  .etrip-collapse-item {
    border-bottom: 1px solid #e5e5e5;
  }

  .etrip-collapse-item:last-child {
    border-bottom: none;
  }

  .etrip-collapse-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background-color: #fff;
    color: #1d1d1d;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    transition: background-color 0.2s;
  }

  .etrip-collapse-header:hover {
    background-color: #f9f9f9;
  }

  .etrip-collapse-arrow {
    transition: transform 0.3s ease;
    color: #666;
    flex-shrink: 0;
    margin-left: 8px;
  }

  .etrip-collapse-header.is-active .etrip-collapse-arrow {
    transform: rotate(90deg);
  }

  .etrip-collapse-wrap {
    will-change: height;
    background-color: #fff;
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  }

  .etrip-collapse-content {
    padding: 0 24px 24px;
    font-size: 15px;
    color: #666;
    line-height: 1.7;
  }

  /* PC端适配 */
  @media (min-width: 769px) {
    .etrip-collapse {
      border-radius: 12px;
    }

    .etrip-collapse-header {
      font-size: 17px;
      padding: 22px 28px;
    }

    .etrip-collapse-content {
      padding: 0 28px 28px;
      font-size: 16px;
    }
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .etrip-collapse {
      border-radius: 0;
      margin: 0 -15px; /* 撑满屏幕宽度 */
      border-left: none;
      border-right: none;
    }

    .etrip-collapse-header {
      padding: 18px 20px;
      font-size: 16px;
    }

    .etrip-collapse-content {
      padding: 0 20px 20px;
      font-size: 15px;
    }

    /* 修正移动端箭头显示问题 */
    .etrip-collapse-arrow {
      width: 14px;
      height: 14px;
    }
  }

  /* 内容样式 */
  .demo-content {
    margin-top: 16px;
  }

  .demo-content p {
    margin: 10px 0;
  }

  .demo-content strong {
    color: #333;
    font-weight: 600;
  }

  /* 通用列表优化：确保换行对齐 */
  .demo-content ul,
  .demo-content ol {
    padding-left: 0;
    margin-left: 0;
  }

  .demo-content li {
    position: relative;
    padding-left: 24px; /* 为编号/圆点留出空间 */
    margin-bottom: 8px;
    text-align: left;
  }

  /* 移除默认标记 */
  .demo-content ul li::before,
  .demo-content ol li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
  }

  /* 无序列表：自定义圆点 */
  .demo-content ul li::before {
    content: '•';
    color: #666;
    font-size: 1.2em;
    line-height: 1.4;
  }

  /* 有序列表：使用计数器模拟编号（自动对齐） */
  .demo-content ol {
    counter-reset: my-counter;
  }

  .demo-content ol li {
    counter-increment: my-counter;
  }

  .demo-content ol li::before {
    content: counter(my-counter) '.';
    color: #666;
    font-weight: 600;
    font-size: 1em;
    line-height: 1.4;
    width: 20px;
    display: inline-block;
    text-align: right; /* 让 9. 和 10. 对齐 */
  }

  /* 移除默认marker */
  .demo-content ul,
  .demo-content ol {
    list-style: none;
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 获取所有折叠项的标题元素
    const headers = document.querySelectorAll('.etrip-collapse-header');

    headers.forEach(header => {
      header.addEventListener('click', function() {
        // 获取当前点击项的关联内容包装器
        const wrap = this.nextElementSibling;
        // 获取当前项的展开状态
        const isExpanded = this.getAttribute('aria-expanded') === 'true';

        // 切换当前项的展开/收起状态
        if (isExpanded) {
          // 收起：设置高度为0
          wrap.style.height = '0';
          this.setAttribute('aria-expanded', 'false');
          this.classList.remove('is-active');
        } else {
          // 展开：计算并设置内容的实际高度
          const content = wrap.querySelector('.etrip-collapse-content');
          wrap.style.height = content.scrollHeight + 'px';
          this.setAttribute('aria-expanded', 'true');
          this.classList.add('is-active');

          // 可选：如果需要手风琴效果（只展开一个），取消注释下面的代码
          // 收起其他所有项
          headers.forEach(otherHeader => {
            if (otherHeader !== this) {
              const otherWrap = otherHeader.nextElementSibling;
              otherWrap.style.height = '0';
              otherHeader.setAttribute('aria-expanded', 'false');
              otherHeader.classList.remove('is-active');
            }
          });
        }
      });
    });
  });
</script>
</body>
</html>
